<template>
	<!-- 会员 -->
	<view class="box">
		<view class="huiyuan_bg" @click="goPage()">
			<!-- <view class="context">
				<view>普通会员</view>
				<view class="btn">立即购物升级特权</view>
			</view>
			<view class="btn_look">
				立即查看
			</view> -->
		</view>
		
		<view class="shop_list">
			<view class="item item1">
			</view>
			<view class="item item2">
			</view>
			<view class="item item3">
			</view>
		</view>
		<image style="width: 100%;height: 220rpx;" mode="aspectFit" src="../../../static/huiyuan/hy1.png"></image>
		<view class="container">
		    <view
		      :id="`cont_${index + 1}`"
		      class="cont-box"
		      :style="{ width: widthCalc, 'margin-left': index === 0 ? 0 : marginCalc }"
		      v-for="(numVal, index) in flowData.column"
		      :key="numVal"
		    >
		      <view class="item-box" v-for="(item, j) in flowData[`column_${index + 1}`]" :key="j">
		        <image class="img-tip" :src="item.imgUrl" mode="widthFix" lazy-load :data-item="item" @load="imgLoad" @error="imgError" />
		        <view class="tit-tip multi-line-omit">{{ item.title }}</view>
		        <view class="desc-tip" style="display: flex;align-items: center;justify-content: space-between;">
					<view style="display: flex;align-items: center;">
						<image src="../../../static/missing-face.png" style="width:48rpx;height:48rpx;border-radius: 50%;" />
						<view class="multi-line-omit" style="padding-left: 12rpx;">{{ item.desc }}</view>
					</view>
					<view>
						<u-icon label="6" labelSize="8" size="12" name="thumb-up"></u-icon>
					</view>
				</view>
		      </view>
		    </view>
		  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flowData: {
					list: [], // 数据值
					column: 2, // 瀑布列数
					columnSpace: 2 // 瀑布列宽间距
				}
			}
		},
		created() {
		    /* 初始化每一列的数据 */
		    for (let i = 1; i <= this.flowData.column; i++) {
		      this.$set(this.flowData, `column_${i}`, []);
		    }
		  },
		  onLoad() {
		    /* 数据赋值 */
		    this.flowData.list = [
		      {
		        imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679045108_thumb.jpg",
		        title: "打卡氢氧沙龙",
		        desc: "赵晓丽。"
		      },
		      {
		        imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679044581_thumb.jpg",
				  title: "打卡氢氧沙龙",
				  desc: "赵晓丽。"
		      },
		      {
		        imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679045190_thumb.jpg",
		        title: "打卡氢氧沙龙",
		        desc: "赵晓丽。"
		      },
		      {
		        imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679044667_thumb.jpg",
		        title: "打卡氢氧沙龙",
		        desc: "赵晓丽。"
		      },
		      {
		        imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679044562_thumb.jpg",
		        title: "打卡氢氧沙龙",
		        desc: "赵晓丽。"
		      },
		      {
		        imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679045057_thumb.jpg",
		        title: "打卡氢氧沙龙",
		        desc: "赵晓丽。"
		      },
		      {
		        imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679044716_thumb.jpg",
		        title: "打卡氢氧沙龙",
		        desc: "赵晓丽。"
		      },
		      {
		        imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679044779_thumb.jpg",
		        title: "打卡氢氧沙龙",
		        desc: "赵晓丽。"
		      },
		      {
		        imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679044956_thumb.jpg",
		        title: "打卡氢氧沙龙",
		        desc: "赵晓丽。"
		      },
		      {
		        imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679044607_thumb.jpg",
		        title: "打卡氢氧沙龙",
		        desc: "赵晓丽。"
		      },
		      {
		        imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679045083_thumb.jpg",
		        title: "打卡氢氧沙龙",
		        desc: "赵晓丽。"
		      },
		      {
		        imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679044643_thumb.jpg",
		        title: "打卡氢氧沙龙",
		        desc: "赵晓丽。"
		      },
		      {
		        imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679044936_thumb.jpg",
		        title: "打卡氢氧沙龙",
		        desc: "赵晓丽。"
		      },
		      {
		        imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679045159_thumb.jpg",
		        title: "打卡氢氧沙龙",
		        desc: "赵晓丽。"
		      }
		    ];
		    this.$nextTick(() => {
		      this.initValue(0);
		    });
		  },
		  computed: {
			/* 计算列宽 */
			widthCalc() {
			  return `${100 / this.flowData.column - this.flowData.columnSpace}%`;
			},
			/* 计算 margin 外边距 */
			marginCalc() {
			  const columnWidth = 100 / this.flowData.column - this.flowData.columnSpace;
			  return `${(100 - columnWidth.toFixed(5) * this.flowData.column) / (this.flowData.column - 1)}%`;
			}
		  },
		methods: {
			goPage(){
				uni.navigateTo({
					url:"./hy_detail"
				})
			},
			/* 获取最小值的对象 */
			    getMinObj(a, s) {
			      let m = a[0][s];
			      let mo = a[0];
			      for (let i = a.length - 1; i >= 0; i--) {
			        if (a[i][s] < m) m = a[i][s];
			      }
			      mo = a.filter(i => i[s] === m);
			      return mo[0];
			    },
			    /* 计算每列的高度 */
			    getMinColumnHeight() {
			      return new Promise(resolve => {
			        const heightArr = [];
			        for (let i = 1; i <= this.flowData.column; i++) {
			          uni
			            .createSelectorQuery()
			            .in(this)
			            .select(`#cont_${i}`)
			            .boundingClientRect(res => {
			              heightArr.push({ column: i, height: res.height });
			            })
			            .exec(() => {
			              if (this.flowData.column <= heightArr.length) {
			                resolve(this.getMinObj(heightArr, "height"));
			              }
			            });
			        }
			      });
			    },
			    /* 初始化瀑布流数据 */
			    async initValue(i) {
			      if (i >= this.flowData.list.length) return false;
			      const minHeightRes = await this.getMinColumnHeight();
			      this.flowData[`column_${minHeightRes.column}`].push({
			        ...this.flowData.list[i],
			        index: i
			      });
			    },
			    /* 图片加载完成 */
			    imgLoad(e) {
			      const i = e.target.dataset.item.index;
			      this.initValue(i + 1); // 加载下一条数据
			    },
			    /* 图片加载失败 */
			    imgError(e) {
			      const i = e.target.dataset.item.index;
			      this.initValue(i + 1); // 加载下一条数据
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
	  .cont-box {
	    $borderRadius: 12rpx;
	    float: left;
	    .item-box {
	      width: 100%;
	      padding-bottom: 20rpx;
	      margin-bottom: 30rpx;
	      border-radius: $borderRadius;
	      box-shadow: 0rpx 3rpx 6rpx rgba(0, 46, 37, 0.08);
	      .img-tip {
	        width: 100%;
	        border-radius: $borderRadius $borderRadius 0 0;
	      }
	      .tit-tip {
	        text-align: justify;
	        font-size: 20rpx;
	        padding: 10rpx 20rpx 0;
	        font-weight: 900;
	      }
	      .desc-tip {
	        text-align: justify;
	        font-size: 20rpx;
			color:#4D4D4D;
	        padding: 5rpx 20rpx 0;
	        margin-top: 10rpx;
	      }
	    }
	  }
	}
	/* 多行省略 */
	.multi-line-omit {
	  word-break: break-all; // 允许单词内自动换行，如果一个单词很长的话
	  text-overflow: ellipsis; // 溢出用省略号显示
	  overflow: hidden; // 超出的文本隐藏
	  display: -webkit-box; // 作为弹性伸缩盒子模型显示
	  -webkit-line-clamp: 2; // 显示的行
	  -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
	}
	/* 单行省略 */
	.one-line-omit {
	  width: 100%; // 宽度100%：1vw等于视口宽度的1%；1vh等于视口高度的1%
	  white-space: nowrap; // 溢出不换行
	  overflow: hidden; // 超出的文本隐藏
	  text-overflow: ellipsis; // 溢出用省略号显示
	}
	.box{
		margin: 0rpx 20rpx 0rpx 20rpx;
		.shop_list{
			display:flex;
			width: 100%;
			padding: 20rpx 0rpx;
			height: 289rpx;
			justify-content: space-between;
			.item{
				height: 100%;width: 259rpx;
				border-radius: 10rpx;
				position: relative;
				.item_bg{
					text-align: center;
					color: #FFFFFF;
					font-size: 30rpx;
					padding-top: 27rpx;
				}
			}
			.item1{
				background: url('../../../static/huiyuan/hy2.png') no-repeat;
				background-size: 100% 100%;
			}
			.item2{
				background: url('../../../static/huiyuan/hy3.png') no-repeat;
				background-size: 100% 100%;
			}
			.item3{
				background: url('../../../static/huiyuan/hy4.png') no-repeat;
				background-size: 100% 100%;
			}
		}
	}
.huiyuan_bg{
	width: 100%;
	height: 386rpx;
	background-color: #053A95;
	background: url('../../../static/huiyuan/bg.png') no-repeat;
	background-size: 100% 100%;
	border-radius: 20rpx;
	position: relative;
	.context{
		position: absolute;
		top:51rpx;
		left:72rpx;
		color:#fff;
		font-size:30rpx;
		.btn{
			width: 226rpx;
			height: 43rpx;
			background: linear-gradient(180deg, #FFFFFF 0%, #A3A3A3 100%);
			border-radius: 100rpx;
			border: 2rpx solid #00499D;
			font-size: 20rpx;
			color:#00499D;
			line-height: 43rpx;
			text-align: center;
			margin-top: 33rpx;
			margin-left: -15rpx;
		}
	}
	.btn_look{
		position: absolute;
		bottom:43rpx;
		left:57rpx;
		width: 132rpx;
		height: 43rpx;
		border-radius: 100rpx;
		border: 1rpx solid #FFFFFF;
		color: #FFFFFF;
		font-size: 20rpx;
		text-align: center;
		line-height: 43rpx;
	}
}
</style>
